<template id="temp">
  <div>
    <div class="header">
      <div class="top">
        <nut-searchbar
          v-model="searchValue"
          background="#00a8bc"
          input-background="#fff"
          placeholder="城市、车站全名或者拼音"
        >
          <template v-slot:leftout>
            <nut-icon @click="clickLeft" size="20" name="left"></nut-icon>
          </template>
        </nut-searchbar>
      </div>
      <div class="main">
        <div class="box1">
          <span
            >当前定位:<nut-icon name="location2"></nut-icon>
            {{ state.opp }}
            <iframe
              id="geoPage"
              width="0"
              height="0"
              frameborder="0"
              style="display: none"
              scrolling="no"
              src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"
            ></iframe>
          </span>
        </div>
        <div class="box2">
          <h3>热门</h3>
          <div class="but" v-for="(v, i) in hotCities" :key="i">
            <button>{{ v.name }}</button>
          </div>
        </div>
      </div>
    </div>
    <div class="zw"></div>
    <div class="one">
      <van-index-bar>
        <p v-for="(v, i) in cityList" :key="i">
          <van-index-anchor :index="v.title" />
          <van-cell
            v-for="(item, i) in v.citys"
            :key="i"
            @click="city(item.name)"
            :title="item.name"
          />
        </p>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
// 获取地址数据
import { api } from "../../api/api";
import router from "../../router";
import { reactive } from "vue";
export default {
  setup() {
    // 定位地址
    const state = reactive({
      opp: "",
    });
    const Tmap = () => {
      window.addEventListener(
        "message",
        function (event) {
          console.log(event);
          var loc = event?.data;
          state.opp = loc?.province;
          // 显示你当前位置
        },
        false
      );
    };
    Tmap();
    function city(val) {
      router.push("/first", val);
      localStorage.setItem("citys", JSON.stringify(val));
    }
    // 返回上一页
    function clickLeft() {
      history.go(-1);
    }
    const cityList = reactive([]);
    const hotCities = reactive([]);
    api.cities.gener().then((res) => {
      Object.assign(cityList, res.data.cityList);
      Object.assign(hotCities, res.data.hotCities);
    });
    return {
      state,
      Tmap,
      cityList,
      hotCities,
      city,
      // 返回上一页
      clickLeft,
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 320px;
  position: fixed;
  top: 0;
}
.zw {
  height: 320px;
}
.main {
  width: 100%;
  .box1 {
    width: 96%;
    margin-left: 2%;
    background: white;
    margin-top: 2%;
    height: 40px;
    line-height: 40px;
    span {
      margin-left: 2%;
    }
    .nut-icon {
      color: green;
    }
  }
  .box2 {
    width: 96%;
    margin-left: 2%;
    margin-top: 2%;
    .but {
      width: 32%;
      float: left;
      text-align: center;
      button {
        width: 80%;
        background: white;
        border: none;
        height: 30px;
        margin-top: 10%;
      }
    }
  }
}
.one {
  width: 100%;
  height: 524px;
  overflow: auto;
}
.van-index-bar__index {
  margin-top: 20px;
}
</style>